<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-input-radio.css"/>
		
		<style type="text/css">
			
			.mheader{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.mleft{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0.5em;
				margin: 0.5em;
				background-color: white;
				border-radius: 20px;
			}
			.mcontent{
				width: 100%;
				background-color: white;
			}
			.mlist{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
			}
			
.my-radio{
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 5em;
}

.addradio{
	border: 1px solid #C7C7CC;
	width: 2em;
	height: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
}
.label{
	width: 2em;
	height: 2em;
}



input[type=text]{
       text-align: right;
    }
.textdiv{
	width: 100%;
	background-color: white;
	margin: 0.2em 0;
}
.mui-btn-block {
    
     margin-bottom: 0px;
    
}
.butdiv{
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #C7C7C7;
	padding: 0.2em 0.5em;
	border-radius: 5px;
}
.bjcss{
	width: 50%;
}
.delcss{
	display: flex;
	justify-content: center;
	align-items: center;
}
.delcss>div{
	width: 50%;
}
.menu{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: auto;
  width: 3em;
  padding: 0.5em;
  border-radius: 5px;
  background: white;
  box-shadow: 0 4px 64px rgba(0, 0, 0, 0.15);
  transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
  z-index: 2;
}
.menu.expanded {
  height: auto;
  width: 100%;
}
.menu span {
  white-space: nowrap;
  visibility: visible;
  opacity: 1;
  transition: .3s;
  transform: rotateY(0deg);
}
.span{
	
}
.menu span:nth-of-type(1) {
  transition-delay: .4s;
}
.menu span:nth-of-type(2) {
  transition-delay: .5s;
}
.menu span:nth-of-type(3) {
  transition-delay: .6s;
}
.menu span:nth-of-type(4) {
  transition-delay: .7s;
}
.menu span.hidden {
  width: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(90deg);
}
.menu span.hidden:nth-of-type(1) {
  transition-delay: .3s;
}
.menu span.hidden:nth-of-type(2) {
  transition-delay: .2s;
}
.menu span.hidden:nth-of-type(3) {
  transition-delay: .1s;
}
.menu span.hidden:nth-of-type(4) {
  transition-delay: 0s;
}
.menu a {
  text-decoration: none;
  text-transform: uppercase;
  color: #333333;
  padding: 5px;
  transition: .3s;
}
.menu a:hover {
  color: #D84315;
}
.container {
  order: 1;
  width: 20px;
  height: 24px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.container:hover .toggle:before {
  top: -9px;
}
.container:hover .toggle:after {
  bottom: -7px;
}
.container .toggle {
  position: relative;
  width: 100%;
  height: 2px;
  background: #aaaaaa;
}
.container .toggle:before {
  position: relative;
  display: flex;
  top: -7px;
  height: 2px;
  width: 100%;
  background: #aaaaaa;
  content: "";
  transition: top .25s ease, bottom .25s ease, transform .5s ease;
}
.container .toggle:after {
  position: relative;
  display: flex;
  bottom: -5px;
  height: 2px;
  width: 100%;
  background: #aaaaaa;
  content: "";
  transition: top .25s ease, bottom .25s ease, transform .25s ease;
}
.container .toggle.close {
  height: 0;
}
.container .toggle.close:before {
  transform: rotate(45deg);
  top: 0;
}
.container .toggle.close:after {
  transform: rotate(-45deg);
  bottom: 2px;
}
*{
	font-size: 0.95em;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">记一笔</h1>
		</header>
		<div class="mui-content">
		    <div class="mheader">
		    	<div class="mleft" id="leftid">
		    		<span class="mui-icon mui-icon-arrowdown">
		    		</span>
		    		<span id="nameid">
		    			
		    		</span>
		    	</div>
		    	<div class="mleft" id="rightid">
		    		<span class="mui-icon mui-icon-arrowdown">
		    		</span>
		    		<span id="timeid">
		    			选择时间
		    		</span>
		    	</div>
		    </div>
		    
		    <div class="mcontent">
		    	<div class="mlist" id="mlistid">
		    		<div class="my-radio" onclick="goaddmark()">
		    		   <div class="addradio">+
		    		   </div>
		    		    <div>自定义</div>
		    		</div>
		    	</div>	
		    </div>
		   <!--
           	作者：592176224@qq.com
           	时间：2019-01-24
           	描述：
           
		   <div class="mcontent flex8">
		    	<div class="bjcss">
			    	<div id="bjid">
			    		<div class="butdiv">编辑</div>
			    	</div>
		    	</div>
		    	<div id="delid" class="hidden">
			    	<div class="delcss">
			    		<div class="butdiv" id="closeid">取消</div>
			    		<div class="butdiv" id="delmarkid">删除</div>
			    	</div>
		    	</div>
		    </div>
		    -->
		    <div class="menu expanded">
			<div class="container close">
				<div class="toggle close"></div>
			</div>
			<span class="span" onclick="setmark()"><a href="#">修改 </a></span>
			<span class="span" onclick="delmark()"><a href="#">删除</a></span>
		</div>
		    
		    <div class="textdiv">
		    	<div class="mui-input-row">
		    	    <label>金额</label>
		    	    <input id="money" type="text" placeholder="请输入金额">
		    	</div>
		    	
		    	<div class="mui-input-row">
		    	    <label>备注</label>
		    	    <input id="remark" type="text" maxlength="50" placeholder="限制50字内">
		    	</div>
		    </div>
		    
		    
		    <div class="fgd"></div>
		    <div class="footdiv">
		    	<button id="addmark" type="button" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
		    </div>
		    
		    
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var sort_id = 0,memid = 0;
			window.onload = function(){
				mui.init();
				mui.ready(function() {
					
					
					get_current_detail();
					
					//获取员工列表
					var nameid = document.getElementById('nameid');
					var data = {
						url:"/api/employee/lst",
						data:{access_token:acctoken(),type:1}
					}
					ajax(data,function(res){
						console.log("员工列表",res);
						var dataarr = [];
						nameid.innerHTML = res.data.data[0].username;
						memid = res.data.data[0].id
						for(var i = 0 ; i < res.data.data.length; i++){
							var str = {
								value : res.data.data[i].id,
								text:res.data.data[i].username
							}
							dataarr.push(str);
						}
						var namePicker = new mui.PopPicker();
	                namePicker.setData(dataarr);
	                var leftid = document.getElementById('leftid');
	                
	                leftid.addEventListener('tap', function(event) {
	                    namePicker.show(function(items) {
	                        nameid.innerHTML = items[0].text;
	                        memid = items[0].value;
	                    });
	                }, false);
					})
					
	                //时间
	                var rightid = document.getElementById('rightid');
	                var timeid = document.getElementById('timeid');
	                timeid.innerHTML = getNowFormatDate();
                	rightid.addEventListener('tap', function(event) {
                	var timePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01),//设置开始日期   
	                    endDate: new Date(2100, 12, 31),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    timePicker.show(function(e) {
                    	 timeid.innerHTML = e.y.text+"-"+e.m.text+"-"+e.d.text+" "+e.h.text+":"+e.i.text;
                    });
                }, false);
	                
            	});
            	
            	//监听确定
            	g("addmark").addEventListener("tap",function(e){
            		var money = g("money").value;
            		var remark = g("remark").value;
            		if("" == money || " " == money){
            			mui.toast("请填写金额！");
            			return;
            		}
            		if( sort_id == 0 || sort_id == "0"){
            			mui.toast("请填选择分类！");
            			return;
            		}
            		var data = {
            			url:"/api/income/add",
            			data:{
            				access_token:acctoken(),
            				sort_id:sort_id||"",
            				money:money,
            				employee_id:memid,
            				remark:remark
            			}
            		}
            		ajax(data,function(res){
            			console.log(res);
            			mui.toast(res.msg);
            			
            			var cPage = plus.webview.currentWebview();
					    var bPage = cPage.opener();
					    cPage.close();
					    bPage.evalJS("onshow();");
            		})
            		
            	})
            	
            	//监听 修改删除
            	$('.container').on('click', function() {
					$('.menu').toggleClass('expanded');
					$('.span').toggleClass('hidden');
					$('.container , .toggle').toggleClass('close');
				});
				getsort();
				
			}
			
			
			//获取登陆员工信息
			function get_current_detail(){
				var data = {
					url:"/api/employee/current_detail",
					data:{
						access_token:acctoken(),
					}
				}
				
				ajax(data,function(res){
					console.log("获取员工信息",res);
					g("nameid").innerHTML = res.data.username;
					memid = res.data.id;
				})
			}
			
			//删除
			function delmark(){
				if(sort_id == 0 || sort_id == "0"){
					mui.toast("请选择分类");
					return;
				}
				mui.confirm("确认删除？","",["取消","确认"],function(e){
					if(e.index == 1){
						var data = {
							url:"/api/income_sort/del",
							data:{access_token:acctoken(),id:sort_id}
					}
					ajax(data,function(res){
						console.log(res);
						mui.toast(res.msg);
						getsort();
					})
					}
					
				})
			}
			//修改
			function setmark(){
				if(sort_id == 0 || sort_id == "0"){
					mui.toast("请选择分类");
					return;
				}
				var list = {sid:sort_id}
				mui.openWindow({
				    url: 'custom.html?sid='+sort_id, 
				    id: 'custom',
				    extras: list,
				});
			}
			
			//获取分类列表
			function getsort(){
				var data = {
					url:"/api/income_sort/lst",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log("分类列表",res);
					setsort(res.data.data)
				})
			}
			//设置分类列表
			function setsort(data){
				var str = '<div class="my-radio" onclick="goaddmark()"><div class="addradio">+'+
		    		   '</div><div>自定义</div></div>';
				for(var i = 0 ; i < data.length; i++){
					str += '<div class="my-radio"><input name="radio" type="radio" value="'+data[i].id+'"><div>'+data[i].name+'</div></div>';
				}
				g("mlistid").innerHTML = str;
				
				$("input[type=radio]").on("change",function(e){
					console.log(this.value);
					sort_id = this.value;
				})
				
			}
			function goaddmark(){
				mui.openWindow({
				    url: 'custom.html', 
				    id: 'custom'
				 });
			}
			
			//刷新
			function onshow(){
				getsort();
			}
		</script>
	</body>

</html>